<template>
  <view class="">
    <uni-nav-bar @clickLeft="$ui.back()" dark color="#FFD76B" backgroundColor="#323232" background-color="#007AFF"
      left-icon="left" status-bar title="抢购" right-text="一键预约" @clickRight="clickRights" />
    <view style="height: 27rpx;">

    </view>
    <view class="cardList" v-for="(item,index) in list" :key="index">
      <image class="image" :src="item.logo" mode=""></image>
      <view class="title">
        {{item.name}}
      </view>
      <div v-if="item.status == 3 && item.s_time >= item.SubscribeTime" class="button">
        待开放
      </div>
      <div v-else-if="item.p_status == 1 && item.s_time >= item.SubscribeTime" class="button"
        @click.stop="openUrl(item)">
        {{ item.p_status | fixStatus }}
      </div>
      <div v-else-if="item.p_status == 4 && item.s_time >= item.SubscribeTime" class="button">
        {{ item.p_status | fixStatus }}
      </div>
      <div v-else class="button" :class="item.p_status == 5 ? 'pet-status-zzz' : ''">
        <span
          v-if="item.p_status == 2 || item.p_status == 5 || item.p_status == 6 || (item.p_status == 3 && item.s_time >= item.SubscribeTime)">{{ item.p_status | fixStatus }}</span>
      </div>
      <view class="u-flex detail u-ju-between">
        <view class="detail-item u-flex u-ali-center u-ju-center">
          <view class="label">
            价值
          </view>
          <view class="span">
            {{item.price}}
          </view>
        </view>
        <view class="detail-item u-flex u-ali-center u-ju-center">
          <view class="label">
            合约
          </view>
          <view class="span">
            {{ item.rate_days }}
          </view>
        </view>
        <view class="detail-item u-flex u-ali-center u-ju-center">
          <view class="label">
            匹配时间
          </view>
          <view class="span">
            {{item.time_slot}}
          </view>
        </view>
      </view>
    </view>
    <view class="" style="height: 100rpx;">

    </view>

    <!-- 一键预约 -->
    <u-popup :show="showKey" class="pop-key-div">
      <div class="pop-key-content">
        <div class="key-top">
          <div class="key-title">确定预约以下全部场次？</div>
          <!-- <van-checkbox v-model="checkedAll" @click="checkAll" shape="square">全选</van-checkbox> -->
        </div>
        <div class="key-check-group">
          <u-checkbox-group v-model="result" placement="column" @change="checkboxChange" ref="checkboxGroup">
            <div class="flex-between-center checked-div">
              <u-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item, index) in keyList" :key="index"
                :label="item.name" :name="item.id">
              </u-checkbox>
            </div>
          </u-checkbox-group>

          <!-- <van-checkbox-group v-model="result" ref="checkboxGroup">
            <div class="flex-between-center checked-div">
              <van-checkbox :name="item.id" shape="square" v-for="(item,index) in keyList" :key="index">{{item.name}}
              </van-checkbox>
            </div>
          </van-checkbox-group> -->
        </div>
        <div class="vant-btn div-sizing">
          <u-button @click="showKey = false">取消</u-button>
          <u-button @click="putSubKey">确定</u-button>
        </div>
      </div>
    </u-popup>

    <!-- 抢购成功 -->
    <u-popup :show="showSuccess" mode="center" @close="showSuccess = false" @open="open">
      <div class="overlay-show">
        <div class="overlay-con-div">
          <div class="flex-between-center overlay-con">
            <div class="result-div" style="position: relative;">
              <div class="result-logo-div" style="position: absolute;top: 30px;left: 50%;transform: translateX(-50%);">
                <img :src="backInfo.logo" alt="" class="result-logo">
              </div>
              <div class="result-info">
                <div class="info-label" style="text-align: center;">
                  收益价值 {{ backInfo.rate }}
                </div>
              </div>
              <div class="vant-btn buttonBtn"
                style="position: absolute;top: 272px;left: 50%;transform: translateX(-50%);background-color: none;">
                <div @click="$ui.push('/pages/mine/mAdoptingRecord/mAdoptingRecord')">
                  去付款
                  </duv>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </u-popup>
    <u-popup :show="showFail" mode="center" @close="showFail = false" @open="open">
      <div class="overlay-show">
        <div class="overlay-con-div">
          <div class="flex-between-center overlay-con overlay-con-fail">
            <div class="result-div" style="position: relative;">
              <div class="result-logo-div" style="position: absolute;top: 50px;left: 50%;transform: translateX(-50%);">
                <img :src="backInfo.logo" alt="" class="result-logo">
                <!-- <img src="../../assets/cm.png" alt="" class="result-logo"> -->
              </div>
              <div class="result-info" style="margin-top: 25px;">
                <div class="info-label" style="text-align: center;">
                  收益价值 {{ backInfo.rate }}
                </div>
              </div>
              <div class="vant-btn buttonBtn"
                style="position: absolute;top: 268px;left: 52%;transform: translateX(-50%);background-color: none;">
                <div @click="showFail = false">
                  我知道了
                  </duv>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </u-popup>

  </view>
</template>

<script>
  import {
    homeAppoint,
    homeIndex,
    verifyMutual,
    getOneKeyInfo,
    putOneKey
  } from '../../api/mAdoptingRecord.js'
  export default {
    data() {
      return {
        showKey: false,
        list: [],
        result: [],
        showFail: false,
        backInfo: {}, // 中奖宠物信息
        showSuccess: false,
        keyList: [] // 预约列表
      }
    },
    filters: {
      fixStatus(status) {
        return status === 1 ?
          '点击预约' :
          status === 2 ?
          '已经预约' :
          status === 3 ?
          '准备匹配' :
          status === 4 ?
          '正在抢购' :
          status === 5 ?
          '正在收益' :
          status === 6 ?
          '抢购中' :
          ''
      },
      fixTime(val) {
        return val >= 10 ? val : '0' + val
      }
    },
    onShow() {
      this.$ui.loading('加载中')
      this.getList()
      this.get_verify_mutal()
    },
    methods: {
      // 一键预约
      putSubKey() {
        let vm = this
        console.log(vm.result, 12321);
        if (vm.result.length > 0) {
          let ids = vm.result.toString()
          putOneKey({
            ids
          }).then(res => {
            console.log(res)
            if (res.code == 1) {
              vm.$ui.toast(res.msg)
              vm.showKey = false
            } else {
              vm.$ui.toast(res.msg)
            }
          })
        } else {
          vm.$ui.toast('请选择预约的场次')
        }

      },
      // 获取抢购结果
      get_verify_mutal() {
        const vm = this
        // -1 抢购失败 1 抢购成功
        verifyMutual().then((res) => {
          if (res.code === 1) {
            // 抢购成功
            if (res.data.result === 1) {
              vm.backInfo = res.data.info
              vm.showSuccess = true
            } else if (res.data.result === -1) {
              // 抢购失败
              vm.backInfo = res.data.info
              vm.showFail = true
            }
          }
        })
      },
      openUrl(item) {
        this.$ui.push('/pages/cardService/cardMake?list=' + JSON.stringify(item))
      },
      // 获取列表
      getList() {
        const vm = this
        homeIndex().then(res => {
          if (res.code == 1) {
            const _new_list = res.data.mutual
            for (const i in _new_list) {
              _new_list[i] = vm.boolTime(_new_list[i])
              _new_list[i].countdown = _new_list[i].countdown * 1000
              // 如果列表中存在抢购中，打开loading层并且获取抢购结果
              if (_new_list[i].p_status == 6) {
                vm.$nextTick(() => {
                  vm.loadingMain = true
                  vm.get_verify_mutal()
                })
              }
            }
            vm.$set(vm, 'list', _new_list)

          }
          uni.hideLoading()
        })
      },
      boolTime(item) {
        if (item.countdown > 0) {
          if (item.countdown < 60) {
            // 准备抢购
            item.p_status = 3
          }
          item.s_time = item.countdown
          item.setTimeInt = setInterval(() => {
            item.s_time -= 1
            if (item.s_time < 60) {
              item.p_status = 3
              clearInterval(item.setTimeInt)
              item.setTimeInt = null
            }
          }, 1000)
        } else {
          item.s_time = 0
        }
        return item
      },
      // 一键预约点击事件
      clickRights() {
        this.$ui.loading('加载中')
        getOneKeyInfo().then(res => {
          if (res.code == 1) {
            this.keyList = res.data
            this.showKey = true
            uni.hideLoading()
          }
        })
        // this.$ui.loading('加载中')
        // var bool = 0
        // var msg = ''
        // this.list.forEach(async (item, index) => {
        //   if (item.p_status == 1 && item.s_time >= item.SubscribeTime) {
        //     let data2 = Object.assign({
        //       id: item.id,
        //     })
        //     try {
        //       const res = await homeAppoint(data2)
        //       console.log(res, 1892371928);
        //       if (res.code == 1) {
        //         bool += 1
        //       } else {
        //         if (msg.includes(res.msg)) {

        //         } else {
        //           msg = msg + res.msg + ' '
        //         }
        //       }
        //       if (index == this.list.length - 1) {
        //         setTimeout(() => {
        //           if (bool == 0) {
        //             this.$ui.toast(msg)
        //           } else {
        //             this.$ui.toast('恭喜预约' + bool + '件商品')
        //           }
        //           uni.hideLoading()
        //         }, 1000)
        //       }
        //     } catch (e) {
        //       console.log(e, '报错了');
        //     }
        //   }
        // })
      },
    },

  }
</script>
<style lang="scss">
  /deep/ .u-popup__content {
    background-color: rgba(0, 0, 0, 0) !important;
  }
</style>
<style lang="less">
  .cardList {
    position: relative;
    margin: 25rpx auto;
    width: 710rpx;
    height: 244rpx;
    background: #FFFFFF;
    border-radius: 10rpx;

    .image {
      position: absolute;
      top: 49rpx;
      left: 0rpx;
      width: 189rpx;
      height: 147rpx;
    }

    .title {
      position: absolute;
      top: 150rpx;
      left: 199rpx;
      font-size: 38rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #D6B55E;
    }

    .button {
      position: absolute;
      bottom: 44rpx;
      right: 30rpx;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #FFFFFF;
      width: 260rpx;
      height: 58rpx;
      line-height: 58rpx;
      text-align: center;
      background: linear-gradient(45deg, #DBAB2B 0%, #E4B945 100%);
      border-radius: 29rpx;
    }

    .detail {
      position: absolute;
      top: 45rpx;
      left: 199rpx;
      width: 500rpx;
      height: 60rpx;

      .detail-item {
        flex-wrap: wrap;
        flex: 1;
        text-align: center;

        .label {
          width: 100%;
          font-size: 22rpx;
          line-height: 22rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #999999;
          text-align: center;
        }

        .span {
          margin-top: 20rpx;
          font-size: 24rpx;
          line-height: 24rpx;
          font-family: PingFang SC;
          font-weight: bold;
          color: #333333;
          text-align: center;
        }
      }
    }
  }

  .overlay-show {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .overlay-con-div {
      width: 664rpx;
      padding-bottom: 140rpx;
    }

    .overlay-con {
      width: 596rpx;
      height: 834rpx;
      padding: 236rpx 42rpx 0 42rpx;
      margin: 0 auto;
      color: #ffffff;
      box-sizing: border-box;
      background: url("~assets/home/success.png") no-repeat;
      background-size: 100% 100%;
      position: relative;
      align-items: flex-start;
      flex-direction: column;

      .result-div {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-direction: column;

        .result-logo-div {
          width: 100%;
          height: 314rpx;
          margin-bottom: 6rpx;
          justify-content: center;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
        }

        .result-logo {
          width: auto;
          height: 100%;
        }

        .result-name {
          height: 44rpx;
          letter-spacing: 4rpx;
          color: #ffffff;
          font-size: 32rpx;
          margin-bottom: 28rpx;
        }

        .result-info {
          width: 100%;
          line-height: 42rpx;
          color: #ffffff;
          margin-bottom: 14rpx;

          .info-label {
            font-size: 32rpx;
          }

          .info-number {
            font-family: "DIN";
          }
        }
      }

      .vant-btn {}
    }

    .overlay-con-fail {
      width: 538rpx;
      height: 738rpx;
      padding: 158rpx 40rpx 0;
      background: url("~assets/home/fail.png") no-repeat;
      background-size: 100% 100%;

      .result-div {
        .result-info {
          color: #cbcbcb;
        }
      }

      .vant-btn {}
    }

    //公告
    .overlay-con-notice {
      width: 557rpx;
      height: 923rpx;
      margin: 0 auto;
      padding: 56rpx 50rpx 0;
      // background: #ffffff;
      background-image: url(../../assets/home/fail-g.png);
      // border: 12rpx solid #ffffff;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;

      .notice-name {
        line-height: 66rpx;
        font-size: 40rpx;
        color: #070707;
        margin-bottom: 32rpx;
      }

      .over-notice-con {
        width: 100%;
        height: 490rpx;
        overflow-y: scroll;
        font-size: 28rpx;
        color: #282828;
        margin-top: 40%;
        margin-left: 5%;

      }

      .overlay-btm {
        margin-top: -15%;
        // position: absolute;
        bottom: 36rpx;
        left: 50rem;
        transform: translateX(-50%);

        .van-button {
          width: 414rpx;
          height: 64rpx;
          line-height: 64rpx;
          font-size: 32rpx;
          padding: 0;
          left: 2.8rem;
          border: none;
          color: #ffffff;
          background: #0000;
        }
      }
    }
  }

  .pop-key-div {
    background: none;

    .pop-key-content {
      margin: 0 atuo;
      width: 100%;
      height: 722rpx;
      border-radius: 45rpx 45rpx 0 0;
      background-color: #fff;
      // background: url("../../assets/home/one-key-bg.png") no-repeat;
      // background-size: 100% 100%;
      position: relative;

      .key-top {
        width: 100%;
        position: absolute;
        top: 100rpx;
        left: 0;

        .key-title {
          width: 100%;
          margin-bottom: 32rpx;
          font-size: 32rpx;
          text-align: center;
          color: #3b3b3b;
        }

        .u-checkbox {
          margin-left: 108rpx;
        }
      }

      .u-checkbox__icon {
        border: 2rpx solid #ACACAC;
        box-sizing: border-box;
        border-radius: 6rpx;

        .u-icon {
          border: none;
        }
      }

      .key-check-group {
        position: absolute;
        top: 218rpx;
        left: 50%;
        transform: translateX(-50%);

        .u-checkbox-group {
          display: flex;
          width: 352rpx;
          height: 260rpx;
          padding: 16rpx;
          box-sizing: border-box;
          overflow: auto;
        }

        .checked-div {
          flex-wrap: wrap;
        }

        .u-checkbox {
          width: 40%;
          margin-bottom: 20rpx;
          color: #324a74;

          &:nth-child(even) {
            justify-content: flex-end;
          }

          .u-icon {
            width: 32rpx;
            height: 32rpx;
          }
        }
      }

      .vant-btn {
        width: 100%;
        padding: 0 54rpx;
        position: absolute;
        bottom: 52rpx;
        justify-content: space-between;

        .u-button {
          width: 180rpx;
          height: 64rpx;
          line-height: 64rpx;
          border-radius: 10rpx;
          color: #12a3e4;
          background: #ffffff;

          &:first-child {
            background: #e9e9e9;
            color: #818181;
          }
        }
      }
    }
  }
</style>
